<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MV</title>
    <link th:href="@{/static/L-css/L-mv.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/static/L-img/font_2533053_iojhpwhxp0b/iconfont.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/static/L-img/font_2550907_osj83i90mhl/iconfont.css}" rel="stylesheet" type="text/css">
    <link rel="shortcut icon"  th:href="@{/static/L-img/L-image/L-logo.png}">
</head>
<body>
    <div class="all">
        <!--头部导航栏-->
        <div class="header">
            <div class="kMusic">
                <img th:src="@{/static/L-img/L-image/future1.jpg}"/>
            </div>
            <ul class="manya">
                <li><a th:href="@{/}">发现音乐</a></li>
                <li><a class="vipBtn">VIP会员</a></li>
                <li><a class="myMusic">我的音乐</a></li>
            </ul>
            <!-- 搜索和登录注册 -->
            <div class="right">
                <div class="headCenter">
                    <div class="headCenterSearch">
                        <form th:action="@{/music/queryByNameMusic}" method="get" class="seekForm" id="seekGoodsForm">
                            <input id="goSearch" autocomplete="off" type="text" name="queryMusicName" placeholder="搜索喜欢的歌单"/>
                            <input type="submit" id="actSearch" value="搜索"/>
                        </form>
                    </div>
                </div>
                <div class="login">
                    <a th:href="@{/loginpage}">登录</a>
                </div>
                <div class="persons" >
                    <span>欢迎</span>
                    <block th:if="${session.USER}!=null">
                        <span class="userName" th:text="${session.USER.userName}">用户名</span>
                    </block>
                    <span class="out">退出登录</span>
                </div>
            </div>
        </div>
        <!--    退出登录的代码-->
        <div class="hideLogOut">
            <div class="hideLogOutContent">
                <h2 class="chooseLogOut">是否退出登录</h2>
                <div class="logOutBtn">
                    <button class="logOutNoBtn">取 消</button>
                    <button class="logOutYesBtn">确 认</button>
                </div>
            </div>
        </div>
        <!--        推荐  歌手 那一行的导航栏-->
        <div class="subject">
            <div class="subject-center">
<!--                mv的那行导航栏-->
                <div class="recomment">
                    <ul>
                        <li ><a th:href="@{/}">推荐</a></li>
                        <li><a href="javascript:;">排行吧榜</a></li>
                        <li><a th:href="@{/music/queryAllSinger}">歌手</a></li>
                        <li><a th:href="@{/music/allMusic}">歌单</a></li>
                        <li class="refer1"><a th:href="@{/toMvpaper}">MV</a></li>
                    </ul>
                </div>
<!--mv的的小视频-->
                <div class="mv-contain">
                    <div class="firstShow">首播</div>
                    <div class="list_out">
                        <div class="album-item">
                            <div class="cover-out">
                                <a th:href="@{/toMv}">
                                    <div class="mv-play">
                                        <i class="iconfont icon-kaishi"></i>
                                    </div>
                                    <img th:src="@{/static/L-img/L-image/L-mv1.jpg}"/>
                                    <div class="play-cnt">
                                        <span class="play-times">
                                            <i class="iconfont icon-bofang"></i>
                                            1079
                                        </span>
                                        <span class="duration">04:07</span>
                                    </div>
                                </a>
                            </div>
                            <p class="mv-name">BETTER</p>
                            <p class="mv-singer">twice</p>
                        </div>
                        <div class="album-item">
                            <div class="cover-out">
                                <a href="javascript:;">
                                    <div class="mv-play">
                                        <i class="iconfont icon-kaishi"></i>
                                    </div>
                                    <img th:src="@{/static/L-img/L-image/mv2.jpg}"/>
                                    <div class="play-cnt">
                                        <span class="play-times">
                                            <i class="iconfont icon-bofang"></i>
                                            1079
                                        </span>
                                        <span class="duration">04:07</span>
                                    </div>
                                </a>
                            </div>
                            <p class="mv-name">BETTER</p>
                            <p class="mv-singer">twice</p>
                        </div>
                        <div class="album-item">
                            <div class="cover-out">
                                <a href="javascript:;">
                                    <div class="mv-play">
                                        <i class="iconfont icon-kaishi"></i>
                                    </div>
                                    <img th:src="@{/static/L-img/L-image/mv3.jpg}"/>
                                    <div class="play-cnt">
                                        <span class="play-times">
                                            <i class="iconfont icon-icon-bofang"></i>
                                            1079
                                        </span>
                                        <span class="duration">04:07</span>
                                    </div>
                                </a>
                            </div>
                            <p class="mv-name">BETTER</p>
                            <p class="mv-singer">twice</p>
                        </div>
                        <div class="album-item">
                            <div class="cover-out">
                                <a href="javascript:;">
                                    <div class="mv-play">
                                        <i class="iconfont icon-kaishi"></i>
                                    </div>
                                    <img th:src="@{/static/L-img/L-image/mv4.jpg}"/>
                                    <div class="play-cnt">
                                        <span class="play-times">
                                            <i class="iconfont icon-bofang"></i>
                                            1079
                                        </span>
                                        <span class="duration">04:07</span>
                                    </div>
                                </a>
                            </div>
                            <p class="mv-name">BETTER</p>
                            <p class="mv-singer">twice</p>
                        </div>
                        <div class="album-item">
                            <div class="cover-out">
                                <a href="javascript:;">
                                    <div class="mv-play">
                                        <i class="iconfont icon-kaishi"></i>
                                    </div>
                                    <img th:src="@{/static/L-img/L-image/mv5.jpg}"/>
                                    <div class="play-cnt">
                                        <span class="play-times">
                                            <i class="iconfont icon-bofang"></i>
                                            1079
                                        </span>
                                        <span class="duration">04:07</span>
                                    </div>
                                </a>
                            </div>
                            <p class="mv-name">BETTER</p>
                            <p class="mv-singer">twice</p>
                        </div>
                        <div class="album-item">
                            <div class="cover-out">
                                <a href="javascript:;">
                                    <div class="mv-play">
                                        <i class="iconfont icon-kaishi"></i>
                                    </div>
                                    <img th:src="@{/static/L-img/L-image/mv6.jpg}"/>
                                    <div class="play-cnt">
                                        <span class="play-times">
                                            <i class="iconfont icon-bofang"></i>
                                            1079
                                        </span>
                                        <span class="duration">04:07</span>
                                    </div>
                                </a>
                            </div>
                            <p class="mv-name">BETTER</p>
                            <p class="mv-singer">twice</p>
                        </div>
                        <div class="album-item">
                            <div class="cover-out">
                                <a href="javascript:;">
                                    <div class="mv-play">
                                        <i class="iconfont icon-kaishi"></i>
                                    </div>
                                    <img th:src="@{/static/L-img/L-image/mv7.jpg}"/>
                                    <div class="play-cnt">
                                        <span class="play-times">
                                            <i class="iconfont icon-bofang"></i>
                                            1079
                                        </span>
                                        <span class="duration">04:07</span>
                                    </div>
                                </a>
                            </div>
                            <p class="mv-name">BETTER</p>
                            <p class="mv-singer">twice</p>
                        </div>
                        <div class="album-item">
                            <div class="cover-out">
                                <a href="javascript:;">
                                    <div class="mv-play">
                                        <i class="iconfont icon-kaishi"></i>
                                    </div>
                                    <img th:src="@{/static/L-img/L-image/mv8.jpg}"/>
                                    <div class="play-cnt">
                                        <span class="play-times">
                                            <i class="iconfont icon-bofang"></i>
                                            1079
                                        </span>
                                        <span class="duration">04:07</span>
                                    </div>
                                </a>
                            </div>
                            <p class="mv-name">BETTER</p>
                            <p class="mv-singer">twice</p>
                        </div>
                        <div class="album-item">
                            <div class="cover-out">
                                <a href="javascript:;">
                                    <div class="mv-play">
                                        <i class="iconfont icon-kaishi"></i>
                                    </div>
                                    <img th:src="@{/static/L-img/L-image/mv9.jpg}"/>
                                    <div class="play-cnt">
                                        <span class="play-times">
                                            <i class="iconfont icon-bofang"></i>
                                            1079
                                        </span>
                                        <span class="duration">04:07</span>
                                    </div>
                                </a>
                            </div>
                            <p class="mv-name">BETTER</p>
                            <p class="mv-singer">twice</p>
                        </div>
                        <div class="album-item">
                            <div class="cover-out">
                                <a href="javascript:;">
                                    <div class="mv-play">
                                        <i class="iconfont icon-kaishi"></i>
                                    </div>
                                    <img th:src="@{/static/L-img/L-image/mv10.jpg}"/>
                                    <div class="play-cnt">
                                        <span class="play-times">
                                            <i class="iconfont icon-bofang"></i>
                                            1079
                                        </span>
                                        <span class="duration">04:07</span>
                                    </div>
                                </a>
                            </div>
                            <p class="mv-name">BETTER</p>
                            <p class="mv-singer">twice</p>
                        </div>
                        <div class="album-item">
                            <div class="cover-out">
                                <a href="javascript:;">
                                    <div class="mv-play">
                                        <i class="iconfont icon-kaishi"></i>
                                    </div>
                                    <img th:src="@{/static/L-img/L-image/mv11.jpg}"/>
                                    <div class="play-cnt">
                                        <span class="play-times">
                                            <i class="iconfont icon-bofang"></i>
                                            1079
                                        </span>
                                        <span class="duration">04:07</span>
                                    </div>
                                </a>
                            </div>
                            <p class="mv-name">BETTER</p>
                            <p class="mv-singer">twice</p>
                        </div>
                        <div class="album-item">
                            <div class="cover-out">
                                <a href="javascript:;">
                                    <div class="mv-play">
                                        <i class="iconfont icon-kaishi"></i>
                                    </div>
                                    <img th:src="@{/static/L-img/L-image/mv12.jpg}"/>
                                    <div class="play-cnt">
                                        <span class="play-times">
                                            <i class="iconfont icon-bofang"></i>
                                            1079
                                        </span>
                                        <span class="duration">04:07</span>
                                    </div>
                                </a>
                            </div>
                            <p class="mv-name">BETTER</p>
                            <p class="mv-singer">twice</p>
                        </div>
                        <div class="album-item">
                            <div class="cover-out">
                                <a href="javascript:;">
                                    <div class="mv-play">
                                        <i class="iconfont icon-kaishi"></i>
                                    </div>
                                    <img th:src="@{/static/L-img/L-image/mv13.jpg}"/>
                                    <div class="play-cnt">
                                        <span class="play-times">
                                            <i class="iconfont icon-bofang"></i>
                                            1079
                                        </span>
                                        <span class="duration">04:07</span>
                                    </div>
                                </a>
                            </div>
                            <p class="mv-name">BETTER</p>
                            <p class="mv-singer">twice</p>
                        </div>
                        <div class="album-item">
                            <div class="cover-out">
                                <a href="javascript:;">
                                    <div class="mv-play">
                                        <i class="iconfont icon-kaishi"></i>
                                    </div>
                                    <img th:src="@{/static/L-img/L-image/mv14.jpg}"/>
                                    <div class="play-cnt">
                                        <span class="play-times">
                                            <i class="iconfont icon-bofang"></i>
                                            1079
                                        </span>
                                        <span class="duration">04:07</span>
                                    </div>
                                </a>
                            </div>
                            <p class="mv-name">BETTER</p>
                            <p class="mv-singer">twice</p>
                        </div>
                        <div class="album-item">
                            <div class="cover-out">
                                <a href="javascript:;">
                                    <div class="mv-play">
                                        <i class="iconfont icon-kaishi"></i>
                                    </div>
                                    <img th:src="@{/static/L-img/L-image/mv16.jpg}"/>
                                    <div class="play-cnt">
                                        <span class="play-times">
                                            <i class="iconfont icon-bofang"></i>
                                            1079
                                        </span>
                                        <span class="duration">04:07</span>
                                    </div>
                                </a>
                            </div>
                            <p class="mv-name">BETTER</p>
                            <p class="mv-singer">twice</p>
                        </div>
                        <div class="album-item">
                            <div class="cover-out">
                                <a href="javascript:;">
                                    <div class="mv-play">
                                        <i class="iconfont icon-kaishi"></i>
                                    </div>
                                    <img th:src="@{/static/L-img/L-image/mv17.jpg}"/>
                                    <div class="play-cnt">
                                        <span class="play-times">
                                            <i class="iconfont icon-bofang"></i>
                                            1079
                                        </span>
                                        <span class="duration">04:07</span>
                                    </div>
                                </a>
                            </div>
                            <p class="mv-name">BETTER</p>
                            <p class="mv-singer">twice</p>
                        </div>
                        <div class="album-item">
                            <div class="cover-out">
                                <a href="javascript:;">
                                    <div class="mv-play">
                                        <i class="iconfont icon-kaishi"></i>
                                    </div>
                                    <img th:src="@{/static/L-img/L-image/mv18.jpg}"/>
                                    <div class="play-cnt">
                                        <span class="play-times">
                                            <i class="iconfont icon-bofang"></i>
                                            1079
                                        </span>
                                        <span class="duration">04:07</span>
                                    </div>
                                </a>
                            </div>
                            <p class="mv-name">BETTER</p>
                            <p class="mv-singer">twice</p>
                        </div>
                        <div class="album-item">
                            <div class="cover-out">
                                <a href="javascript:;">
                                    <div class="mv-play">
                                        <i class="iconfont icon-kaishi"></i>
                                    </div>
                                    <img th:src="@{/static/L-img/L-image/mv19.jpg}"/>
                                    <div class="play-cnt">
                                        <span class="play-times">
                                            <i class="iconfont icon-bofang"></i>
                                            1079
                                        </span>
                                        <span class="duration">04:07</span>
                                    </div>
                                </a>
                            </div>
                            <p class="mv-name">BETTER</p>
                            <p class="mv-singer">twice</p>
                        </div>
                        <div class="album-item">
                            <div class="cover-out">
                                <a href="javascript:;">
                                    <div class="mv-play">
                                        <i class="iconfont icon-kaishi"></i>
                                    </div>
                                    <img th:src="@{/static/L-img/L-image/mv20.jpg}"/>
                                    <div class="play-cnt">
                                        <span class="play-times">
                                            <i class="iconfont icon-bofang"></i>
                                            1079
                                        </span>
                                        <span class="duration">04:07</span>
                                    </div>
                                </a>
                            </div>
                            <p class="mv-name">BETTER</p>
                            <p class="mv-singer">twice</p>
                        </div>

                    </div>
<!--                    换页的内容-->

                </div>

            </div>
        </div>
        <!-- 下边的小黑窗 -->
        <div class="black">
            <ul class="logo">
                <li><a href="javascript:;">用户服务协议</a></li>
                <li>隐私政策</li>
                <li>权利声明</li>
                <li>联系我们</li>
                <li>广告服务</li>
            </ul>
        </div>
        <div class="foot">
            <p>抛开忙碌，远离喧嚣，进入这里，你会发现生活是多么的缤纷多彩 欢迎加入我们</p>
            <p>Copyright © 2001 - 2021 Tencent. All Rights Reserved.</p>
            <p>未来公司 版权所有 QQ:911662779</p>
        </div>
    </div>
    <!--侧边栏置顶-->
    <!-- 侧边栏 -->
    <ul class="side">
        <li class="items up" onclick="toTop()">
            <a href="javascript:;">
                <img th:src="@{/static/L-img/L-image/L-up.png}"/>
            </a>
        </li>
    </ul>
    <!--没有登录会弹出一个提示的弹窗-->
    <div class="hideVipLoad">
        <div class="hideVipLoadForm">
            <div class="hideVipTop">
                <h5>提示</h5>
                <button class="closeVip"><span>x</span></button>
            </div>
            <div class="popub">
                <div class="popub-inner">
                    <div class="popub-img">
                        <img th:src="@{/static/L-img/L-image/point.png}"/>
                    </div>
                    <p class="popub-desc">你还没有登录，请先登录!</p>
                </div>
            </div>
            <div class="hideFormBottom">
                <button class="loadBtn">登录</button>
            </div>
        </div>
    </div>
</body>
<script th:src="@{/static/L-js/L-mv.js}" rel="script" type="text/javascript">
</script>
</html>